<style>
	.pageClass {
		margin-top: 20px;
		text-align: center;
	}
	
	.add-btn {
		margin-top: -25px;
		margin-right: 25px;
	}
</style>

<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
				<Breadcrumb-item href="#">首页</Breadcrumb-item>
				<Breadcrumb-item href="#">门店商品管理</Breadcrumb-item>
				<Breadcrumb-item>门店商品列表</Breadcrumb-item>
			</Breadcrumb>
		</div>
		<div class="layout-content">
			<div class="layout-content-main">
				<Table border :columns="columns1" :data="data1"></Table>
				<Page :current="current" :total="totalCount" :page-size="pageSize" :class-name="pageClass" size="small" show-elevator show-sizer @on-change="onChange" @on-page-size-change="onPageSizeChange"></Page>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				columns1: [{
						title: '门店',
						key: 'shopName'
					}, {
						title: '商品',
						key: 'goodsName'
					},
					{
						title: '库存',
						key: 'stock'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.showStockOut(params)
										}
									}
								}, '查看出库单')
							]);
						}
					}
				],
				data1: [],
				userId: window.localStorage["userId"],
				totalCount: 10,
				current: 1,
				pageSize: 10,
				pageClass: "pageClass"
			}
		},
		beforeMount() {
			this.load()
		},
		methods: {
			load() {
				this.$tldJsonp({
					isLayer: true,
					url: this.$domain + "/tld/admin/shopgoods/list.json",
					params: {
						pageNo: this.current,
						pageSize: this.pageSize,
						userId: this.userId
					},
					successFc: (response) => {
						this.data1 = response.data.data
						this.totalCount = response.data.totalCount
					}
				})
			},
			showStockOut(params) {
				this.$router.push({
					path: '/tld/index/stockOut',
					query: {
						shopId: params.row.shopId,
						goodsId: params.row.goodsId
					}
				});
			},	
			onChange(val) {
				this.current = val;
				this.load();
			},
			onPageSizeChange(val) {
				this.pageSize = val;
				this.load();
			}
		}
	}
</script>